<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link rel="shortcut icon" href="__IMG__/favicon.ico" />
	<link rel="bookmark" href="__IMG__/favicon.ico" type="image/x-icon" 　/>
	<title>游戏大厅</title>
	<link rel="stylesheet" type="text/css" href="__CSS__/mui.min.css"/>
	<link rel="stylesheet" type="text/css" href="__CSS__/common.css"/>
	<link rel="stylesheet" type="text/css" href="__CSS__/index.css"/>
	<script src="__JS__/mui.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" charset="utf-8">
        mui.init();
	</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
	<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	<h1 class="mui-title">北京赛车({$hall_name})</h1>
	<a href="{:url('lottery/history',array('cate'=>3))}" class="right  blue mg_top10">开奖记录</a>
</header>
<div class="mui-content">
	<div class="top_fix">
		<ul class="clearfix list_one_box">
			<li>
				<p class="color_ff">距离{$stage_data.stage_next}期截止</p>
				<h4 class="color_ff">
					<div class="colockbox" id="demo04">
						<span class="minute">00</span>
						<span class="second">00</span>
						<input type="hidden" id="my_day" value="{$stage_data.dateline}">
					</div>
				</h4>
			</li>
			<li>
				<p class="color_ff">余额</p>
				<h4>
					<span id="balance">{$stage_data['balance']}</span>元宝
				</h4>
			</li>
		</ul>
		<div class="padding_5 bor_b hall_box1 clearfix ">
			<p class="left hall_box1_left">第<span class="blue">{$stage_data.stage}</span>期</p>
			<div class="left hall_box1_right">
				<p class="blue" id="hall_box1_p">
					{foreach $stage_data['number'] as $k=>$v}
						<i class="bg_{$v}">{$v}</i>
					{/foreach}
		        </p>
					<p class="blue">{$stage_data['detail']}</p>

			</div>
		</div>
		<div class="hall_box1_all">
			{foreach $number as $k=>$v}
			<div class="padding_5 bor_b hall_box1 clearfix">
				<p class="left hall_box1_left">第<span class="blue">{$v.stage}</span>期</p>
				<div class="left hall_box1_right">
					<p class="blue">
						{foreach $v['number'] as $kk=>$vv}
						<i class="bg_{$vv}">{$vv}</i>
						{/foreach}
					</p>
					<p class="blue">{$v['detail']}</p>

				</div>
			</div>
			{/foreach}

		</div>
		</div>
	<div class="lottery_box1" style="margin-top: 120px;" id="content">
		{if $room}
		{foreach $room as $kkk=>$vvv }
		<div class="lottery_comm padding_5">
			<i><img style='border-radius: 50%' src="{$vvv['head']}" style="border-radius: 50%"></i>
			<div class="lottery_comm_boss1">
				<p>{$vvv['nickname']}({$vvv['time']})</p>
				<div class="lottery_bg">
					<div class="padding_5">
						<h4 class="color_ff ">{$vvv['play']}：{$vvv['number']}</h4>
						<h5 class="color_ff mg_top5"><i class="icon_money_box"><img src="__IMG__/icon_money.png" class="vertical-align_m width_100" alt="" /></i>{$vvv.money}元</h5>
						<p class="">第{$vvv['stage']}期</p>
						<input type="hidden"  id="time" value="{$vvv['time']}">
					</div>
				</div>
			</div>
		</div>
		{/foreach}
		{/if}
	</div>
</div>
<div class="overlay"></div>
<div class="footer_box">
	<div class="footer_lottery padding_5">
		<div class="clearfix padding_lr10">
			<div class="left mui-col-sm-8">
				<input type="number" value="" placeholder="请输入金额" class="betting_btn">
			</div>
			<div class="right mui-col-sm-4">
				<input type="button" id="" value="投注" class="bg_red color_ff mg_top5 betting_btn1" style="border-radius: 15px;">
				<a class="more_a1">...</a>
			</div>
		</div>
	</div>
	<nav class="mui-bar mui-bar-tab">
		<a class="mui-tab-item1 " href="{:url('web/play_rule_web',array('cate'=>$cate))}">
			<span class="mui-icon mui-active"><img class="width_100" src="__IMG__/icon_l1.png"/></span>
			<span class="mui-tab-label">游戏说明</span>
		</a>
		<a class="mui-tab-item1 " href="{:url('web/odds_rule_web',array('cate'=>$cate,'hall'=>$hall))}">
			<span class="mui-icon "><img class="width_100" src="__IMG__/icon_l2.png"/></span>
			<span class="mui-tab-label">赔率说明</span>
		</a>
		<a class="mui-tab-item1" href="{:url('web/water_rule_web',array('cate'=>$cate,'hall'=>$hall))}">
			<span class="mui-icon "><img class="width_100" src="__IMG__/icon_l3.png"/></span>
			<span class="mui-tab-label">回水说明</span>
		</a>
		<a class="mui-tab-item1 " href="{:url('mine/transaction_record',array('cate'=>$cate))}" >
			<span class="mui-icon"><img class="width_100" src="__IMG__/icon_l4.png"/></span>
			<span class="mui-tab-label">中奖明细</span>
		</a>
	</nav>
</div>
<div class="spring_lottery">
	<div class="spring_lottery_main">
		<ul class="spring_lottery_top clearfix padding_tb10">
			<li class="active"><a href="javascript:void(0);">双面盘</a></li>
			<li><a href="javascript:void(0);">冠亚军和值</a></li>
			<li><a href="javascript:void(0);">单号1-5</a></li>
			<li><a href="javascript:void(0);">单号6-10</a></li>
		</ul>
		<div class="spring_lottery_box active">
			{foreach $odds as $k=>$v}
			{if $k>=0 && $k<=10}
			<div class="spring_lottery_list_box">
				<!--<h4> 双面盘</h4>-->
				<p>{$v['title']}</p>
				<ul class="spring_lottery_list spring_a clearfix">
					{foreach $v['name'] as $kk=>$vv}
					<li >
						<a href="javascript:void(0);">
							<p>{$vv.rule}</p>
							<p>1:{$vv.rate}</p>
							<input type="hidden" value="{$vv.type}">
							<input type="hidden" value="{$v.title}">
						</a>
					</li>
					{/foreach}
				</ul>
			</div>
			{/if}
			{/foreach}
		</div>
		<div class="spring_lottery_box">
			{foreach $odds as $k=>$v}
			{if $k==11}
			<div class="spring_lottery_list_box">
				<p>{$v['title']}</p>

				<ul class="spring_lottery_list2 spring_a clearfix">
					{foreach $v['name'] as $kk=>$vv}
					<li >
						<a href="javascript:void(0);">
							<p>{$vv.rule}</p>
							<p>1:{$vv.rate}</p>
							<input type="hidden" value="{$vv.type}">
							<input type="hidden" value="{$v.title}">
						</a>
					</li>
					{/foreach}
				</ul>
			</div>
			{/if}
			{/foreach}
		</div>
		<div class="spring_lottery_box">
			{foreach $odds as $k=>$v}
			{if $k>=12 && $k<=16}
			<div class="spring_lottery_list_box">
				<p>{$v['title']}</p>

				<ul class="spring_lottery_list2 spring_a clearfix">
					{foreach $v['name'] as $kk=>$vv}
					<li >
						<a href="javascript:void(0);">
							<p>{$vv.rule}</p>
							<p>1:{$vv.rate}</p>
							<input type="hidden" value="{$vv.type}">
							<input type="hidden" value="{$v.title}">
						</a>
					</li>
					{/foreach}
				</ul>
			</div>
			{/if}
			{/foreach}
		</div>
		<div class="spring_lottery_box">
			{foreach $odds as $k=>$v}
			{if $k>=17 && $k<=21}
			<div class="spring_lottery_list_box">
				<p>{$v['title']}</p>

				<ul class="spring_lottery_list2 spring_a clearfix">
					{foreach $v['name'] as $kk=>$vv}
					<li >
						<a href="javascript:void(0);">
							<p>{$vv.rule}</p>
							<p>1:{$vv.rate}</p>
							<input type="hidden" value="{$vv.type}">
							<input type="hidden" value="{$v.title}">
						</a>
					</li>
					{/foreach}
				</ul>
			</div>
			{/if}
			{/foreach}
		</div>
	</div>
	<div class="padding_10 spring_lottery_btn">
		投注金额：<input type="number" id="money" value="" />
		<a href="javascript:void(0);" onclick="betting()">投注</a>
		<a href="javascript:void(0);" onclick="zc()">重置</a>
		<input type="hidden"  id="hall" value="{$hall}">
		<input type="hidden"  id="stage" value="{$stage_data.stage_next}">
		<input type="hidden"  id="head" value="{$stage_data.head|default='__IMG__/user_head.png'}">
		<input type="hidden"  id="room_id" value="{$room_id}">
		<input type="hidden"  id="username" value="{$username}">
	</div>
</div>
<script type='text/javascript' src='__JS__/webim.config.js'></script>
<script type='text/javascript' src='__JS__/strophe-1.2.8.min.js'></script>
<script type='text/javascript' src='__JS__/websdk-1.4.13.js'></script>
<script src="__JS__/jquery-1.7.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="__JS__/index1.js" type="text/javascript" charset="utf-8"></script>
<script src="__JS__/layer.js" ></script>
<script src="__JS__/rooms.js" ></script>
<script>

    $(function(){
        $("#hall_box1_p").click(function(){
            if($('.hall_box1_all').hasClass("active")){
                $(".hall_box1_all").removeClass("active");
			}else {
                $(".hall_box1_all").addClass("active")
			}
		});
        var my_day   = $('#my_day').val();
        var room_id  = $('#room_id').val();
        var username = $('#username').val();
        countDown(my_day,null,"#demo03 .hour","#demo04 .minute","#demo04 .second");
        hx_room(room_id,username);
    });
    function zc() {
        $('.spring_a li.active').removeClass("active");
    }
    function betting() {
        var money  = $('#money').val();
        var stage  = $('#stage').val();
        var hall   = $('#hall').val();
        var minute =  parseInt($('.minute').text());
        var second =  parseInt($('.second').text());
        if(minute==0 && second==0){
            my_error('本期已经封盘');
            return false;
        }
        if(money==null ||money==""  ){
            my_error('请输入投注金额');
            return false;
        }
        if(money<=0){
            my_error('投注金额超出范围');
            return false;
        }
        var is_chooose = $('.spring_a li.active').length;
        if(is_chooose==0){
            my_error('请选择投注选项');
            return false
        }
        var number_arr=[];
        $('.spring_a li.active').each(function () {
            var type   = $(this).find('input:eq(0)').val();
            var play   = $(this).find('input:eq(1)').val();
            var number = $(this).find('p:eq(0)').html();
            var list = {};
            list['type']   = type;
            list['number'] = number;
            list['play']   = play;
            list['money']  = money;
            number_arr.push(list);
        });
        var list1 = JSON.stringify(number_arr);
        $.ajax({
            type: "post",
            url: "{:url('game/betting')}",
            data: {'cate':3,'stage':stage,'hall':hall,'list':list1},
            dataType: "json",
            async: false,
            success: function(data) {
                var ret   = data.ret;
                var info  = data.msg;
                var blance = data.data.money;
                if(ret=='200'){
                    $('#balance').html(blance);
                    zc();
                    my_error(info);
                }else{
                    my_error(info);
                }
            }
        });

    }
    function countDown(time,day_elem,hour_elem,minute_elem,second_elem) {
        time = time.replace(/\-/g, "/");
        var end_time = new Date(time).getTime(),//月份是实际月份-1
        sys_second =Math.floor((end_time - new Date().getTime()) / 1000);
        var open =1;
        var timer = setInterval(function () {
            if (sys_second > 0) {
                sys_second -= 1;
                var day = Math.floor((sys_second / 3600) / 24);
                var hour = Math.floor((sys_second / 3600) % 24);
                var minute = Math.floor((sys_second / 60) % 60);
                var second = Math.floor(sys_second % 60);
                day_elem && $(day_elem).text(day);//计算天
                $(hour_elem).text(hour < 10 ? "0" + hour + ':' : hour + ':');//计算小时
                $(minute_elem).text(minute < 10 ? "0" + minute + ':' : minute + ':');//计算分
                $(second_elem).text(second < 10 ? "0" + second : second);// 计算秒
            } else {
                if(open==1) {
                    var show_betting1 = "<div class='lottery_comm padding_10'>"
                        + "<div class='game_over'>"
                        + "<p class='color_55'>"
                        + "<span class='blue'>"
                        + "[{$stage_data.stage_next}期]"
                        + "</span>"
                        + "已封盘，下注结果以开奖结果为准，如有异议，请及时联系客服"
                        + "</p>"
                        + "</div>"
                        + "</div>";
                    $('.lottery_box1').append(show_betting1);
                    open = 0;
                }
                var timer1 = setInterval(function () {
                    if (sys_second <= 0) {
                        $(minute_elem).text('00');//计算分
                        $(second_elem).text('00');// 计算秒
                        location.reload();
                    } else {
                        clearInterval(timer1);
                    }
                }, 10000);
            }
        }, 1000);
    }
    function hx_room(room_id,username) {
        var conn = new WebIM.connection({
            isMultiLoginSessions: WebIM.config.isMultiLoginSessions,
            https: typeof WebIM.config.https === 'boolean' ? WebIM.config.https : location.protocol === 'https:',
            url: WebIM.config.xmppURL,
            heartBeatWait: WebIM.config.heartBeatWait,
            autoReconnectNumMax: WebIM.config.autoReconnectNumMax,
            autoReconnectInterval: WebIM.config.autoReconnectInterval,
            apiUrl: WebIM.config.apiURL,
            isAutoLogin: true
        });
        /*登录*/
        var options = {
            apiUrl: WebIM.config.apiURL,
            user: username,
            pwd: username,
            appKey: WebIM.config.appkey
        };
        conn.open(options);
        conn.listen({
            onOpened: function ( message ) {          //连接成功回调
                conn.joinChatRoom({
                    roomId: room_id // 聊天室id
                });
            },
            onClosed: function ( message ) {
                console.log('连接关闭')
            },         //连接关闭回调
            onTextMessage: function ( message ) {
                var data = message.ext.info;
                data = $.parseJSON(data);
//                console.log(data);
                for(var i = 0; i < data.length; i++){
                    var show_betting = "<div class='lottery_comm padding_5'>"
                        + "<i><img style='border-radius: 50%' src=" + data[i].head + ">" + "</i>"
                        + "<div class='lottery_comm_boss1'>"
                        + "<p>" + data[i].nickname + "(" + data[i].time + ")</p>"
                        + "<div class='lottery_bg'>"
                        + "<div class='padding_5'>"
                        + "<h4 class='color_ff'>" + data[i].title + ":" + data[i].number + "</h4>"
                        + "<h5 class='color_ff mg_top5'>"
                        + "<i class='icon_money_box'><img src='__IMG__/icon_money.png' class='vertical-align_m width_100' alt=''>" + "</i>"
                        + data[i].money + "元" + "</h5>"
                        + "<p class=''>" + "第" + data[i].stage + "期" + "</p>"
                        + "</div>"
                        + "</div>"
                        + "</div>"
                        + "</div>";
                    $('.lottery_box1').append(show_betting);
                }
                $('#content').scrollTop( $('#content')[0].scrollHeight );

            },//收到文本消息
            onPresence: function ( message ) {
                handlePresence(message);
            }
        });
        var handlePresence = function ( e ) {
            if(e.type === 'memberJoinChatRoomSuccess'){
            }
        };
    }

</script>
</body>
</html>
